<template>
  <el-dialog
    :visible.sync="datas.show"
    :show-close="false"
    width="1380px"
    top="10vh"
    custom-class="realTimeView"
  >
    <section class="phoneAll">
      <el-scrollbar>
        <!-- 顶部 -->
        <div class="phone-top">
          <div class="phone-top__container">
            <span class="text">欢迎来到xxx教育！</span>
            <span class="mlauto text mr20">
              <img src="@/assets/images/template/pc/icon6.png" />
              学习中心
            </span>
            <span class="text mr20">
              <img src="@/assets/images/template/pc/icon1.png" />
              购物车
            </span>
            <span class="text mr20">
              <img src="@/assets/images/template/pc/icon2.png" />
              客服中心
            </span>
            <img class="mr20" src="@/assets/images/template/pc/icon7.png" />
            <img class="mr20" src="@/assets/images/template/pc/icon5.png" />
            <img class="mr10" src="@/assets/images/template/pc/icon3.png" />
            <span class="text">登录</span>
            <span class="line"></span>
            <span class="text">注册</span>
            <img class="new" src="@/assets/images/template/pc/icon4.png" />
          </div>
        </div>

        <!-- 动态组件 -->
        <section class="phone-container">
          <component
            :is="item.component"
            v-for="(item, index) in val.component"
            :key="index"
            :datas="item.setStyle"
            class="componentsClass"
            :data-type="item.type"
          />
        </section>
      </el-scrollbar>
    </section>

    <!--<div class="phone-footer">-->
    <!--  <el-button size="small" plain @click="datas.show = false">-->
    <!--    退出预览-->
    <!--  </el-button>-->
    <!--  <el-button size="small" type="primary" @click="exportJSON">-->
    <!--    发布-->
    <!--  </el-button>-->
    <!--</div>-->
  </el-dialog>
</template>

<script>
/* 组件目录 START */
import placementarea from '../componentscom/placementarea'
import navigation from '../componentscom/navigation'
import banner from '../componentscom/banner'
import advert from '../componentscom/advert'
import intentCourse from '../componentscom/intentCourse'
import course from '../componentscom/course'
import teacher from '../componentscom/teacher'
import topic from '../componentscom/topic'
import featured from '../componentscom/featured'
/* 组件目录 END */

export default {
  name: 'RealTimeView',
  components: {
    placementarea,
    navigation,
    banner,
    advert,
    intentCourse,
    course,
    teacher,
    topic,
    featured
  },
  props: {
    datas: {
      type: Object,
      default: () => {
        return {
          show: false
        }
      }
    },
    val: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {
    // 导出json
    exportJSON() {
      console.log(this.val.component)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .realTimeView {
  background: transparent;
  box-shadow: none;
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    padding: 0;
  }
}

.realTimeView {
  .phoneAll {
    position: relative;
    background: #dcdfe6;
    border-radius: 16px;
    padding: 6px;
    height: 80vh;
    ::v-deep.el-scrollbar {
      height: 100%;
    }
    ::v-deep.el-scrollbar__wrap {
      height: 100%;
    }
    ::v-deep.el-scrollbar__bar {
      z-index: 999999;
    }
    .phone-top {
      background: #f5f5f5;
      .phone-top__container {
        width: 834px;
        margin: 0 auto;
        height: 28px;
        display: flex;
        align-items: center;
        position: relative;
        .text {
          font-size: 8px;
          font-weight: 400;
          color: #606266;
          line-height: 11px;
        }
        .item {
          font-size: 8px;
          font-weight: 400;
          color: #606266;
          line-height: 11px;
        }
        .mlauto {
          margin-left: auto;
        }
        .mr20 {
          margin-right: 20px;
        }
        .mr10 {
          margin-right: 10px;
        }
        .line {
          width: 1px;
          height: 7px;
          background: #dcdfe6;
          margin: 0 3px;
        }
        .new {
          position: absolute;
          right: 37px;
          top: 24px;
          z-index: 99;
        }
      }
    }
    .phone-container {
      background: #ffffff;
    }
  }
  .phone-footer {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
